<template>
  <el-dropdown trigger="click" @command="handleSetSize">
    <div>
      <i class="fa fa-language svg-icon" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item of languageList"
        :key="item.value"
        :disabled="language===item.value"
        :command="item.value"
      >
        {{ $t(item.label) }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { getLanguage, setLanguage, getUserId } from '@/util/storage'
import { updateUser } from '@/api/auth/authUserApi'
import { listLanguage } from '@/util/common'
export default {
  props: {
    isSave: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      language: getLanguage() || 'zh',
      languageList: []
    }
  },
  created() {
    this.languageList = listLanguage(this)
  },
  methods: {
    handleSetSize(language) {
      setLanguage(language)
      this.language = language
      this.$i18n.locale = language
      this.refreshView()
      if (this.isSave) {
        updateUser({
          userId: getUserId(),
          language: language
        })
      }
    },
    refreshView() {
      // In order to make the cached page re-rendered
      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
      const { fullPath } = this.$route
      this.$nextTick(() => {
        this.$router.replace({
          path: '/redirect' + fullPath
        })
      })
    }

  }
}
</script>
<style scoped>
  .svg-icon {
    vertical-align: -0.15em;
    overflow: hidden;
  }

</style>
